<!--
<template>
  <div>
    <el-table :data="devices" style="width: 100%">
      <el-table-column prop="typeId" label="设备类型编号"></el-table-column>
      <el-table-column prop="total" label="设备总数"></el-table-column>
      <el-table-column prop="borrowedTotal" label="借出设备数"></el-table-column>
      <el-table-column prop="notBorrowedTotal" label="库存设备数"></el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: "DeviceCount",
  data(){
    return{
      devices:[]
    }
  },

  created() {
    this.load()
  },

  methods: {
    load() {
      this.request.get("/device/count/list")
          .then(res => {
            //若果返回结果为true
            if (res.code === '200') {
              this.devices = res.data
            } else {

            }
          })
    },
  }
}
</script>

<style scoped>
.el-table {
  width: 100%;
}
</style>-->


<template>
  <div class="device-count" style="text-align: center">
    <el-table :data="devices" style="width: 100%" stripe>
      <el-table-column prop="typeId" label="设备类型编号" align="center"></el-table-column>
      <el-table-column prop="name" label="设备类型名" align="center"></el-table-column>
      <el-table-column prop="total" label="设备总数"  align="center"></el-table-column>
      <el-table-column prop="borrowedTotal" label="借出设备数" align="center"></el-table-column>
      <el-table-column prop="notBorrowedTotal" label="库存设备数" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "DeviceCount",
  data(){
    return{
      devices:[]
    }
  },

  created() {
    this.load()
  },

  methods: {
    load() {
      this.request.get("/device/count/list")
          .then(res => {
            //若果返回结果为true
            if (res.code === '200') {
              this.devices = res.data
            } else {

            }
          })
    },
  }
}
</script>

<style scoped>
.device-count {
  background-color: #f5f7fa;
  margin: 10px;
  padding: 10px;
}

/* Element UI 表格样式 */
.el-table {
  width: 100%;
  background-color: #fff;

  /* 调整表格布局 */
  table-layout: fixed;

  /* 调整表格字体大小和颜色 */
  font-size: 14px;
  color: #606266;

  /* 去除表格边框 */
  border-collapse: separate;
  border-spacing: 0;
}
.el-table th,
.el-table td {
  padding: 12px 10px;
  border-left: none;
  border-right: none;
  text-align: center; /* 文本居中显示 */
}
.el-table th:last-child,
.el-table td:last-child {
  border-right: none;
}
.el-table th {
  background-color: #f5f7fa;
  font-weight: 600;
}
.el-table tr:hover td {
  background-color: #f5f5f5;
}
</style>
